<template>
  <!--:value="valueId"-->
  <el-select ref="treeSelect" :value="valueId" :clearable="clearable" @clear="clearHandle">
    <el-option :value="valueId" :label="valueLabel" class="options">
      <el-tree
        id="tree-option"
        ref="tree"
        :accordion="accordion"
        :data="treeData"
        :props="treeProps"
        :node-key="treeProps.id"
        :default-expanded-keys="defaultExpandedKey"
        @node-click="handleNodeClick"
      />
    </el-option>
  </el-select>
</template>
<script>
export default {
  name: 'ElTreeSelect',
  model: {
    // 绑定的值，通过父组件传递
    prop: 'initValueId',
    // 自定事件名  this.$emit("tree-update", val);
    event: 'tree-update'
  },
  props: {
    // 配置项
    treeProps: {
      type: Object,
      default: function() {
        return { id: 'id', label: 'label', children: 'children' }
      }
    },
    // 选项列表数据(树形结构的对象数组)
    treeData: {
      type: Array,
      default: function() { return [] }
    },
    // 初始值
    initValueId: { type: String, default: null },
    // 可清空选项
    clearable: { type: Boolean, default: true },
    // 自动收起
    accordion: { type: Boolean, default: false }
  },
  data() {
    return {
      valueId: '',
      valueLabel: '',
      defaultExpandedKey: []
    }
  },
  watch: {
    initValueId(newVal, oldVal) {
      // console.log('55' + 'initValueId', '-' + newVal + '-', '-' + oldVal + '-')
      if (!newVal) {
      //  新值无效
        this.clearHandle()
      } else {
        this.valueId = this.initValueId
        this.initHandle()
      }
    }
  },
  mounted() {
    // console.log('61' + 'mounted', '-' + this.initValueId + '-', '-' + this.valueId + '-')
    if (this.initValueId) {
      this.valueId = this.initValueId
      this.initHandle()
    }
  },
  methods: {
    // 初始化值
    initHandle() {
      if (this.valueId) {
        const tree = this.$refs.tree
        this.valueLabel = tree.getNode(this.valueId).data[this.treeProps.label] // 初始化显示
        tree.setCurrentKey(this.valueId) // 设置默认选中
        this.defaultExpandedKey = [this.valueId] // 设置默认展开
      }
      this.initScroll()
    },
    // 初始化滚动条
    initScroll() {
      this.$nextTick(() => {
        const scrollWrap = document.querySelectorAll('.el-scrollbar .el-select-dropdown__wrap')[0]
        const scrollBar = document.querySelectorAll('.el-scrollbar .el-scrollbar__bar')
        scrollWrap.style.cssText = 'margin: 0px; max-height: none; overflow: hidden;'
        scrollBar.forEach(ele => {
          ele.style.width = 0
        })
      })
    },
    // 切换选项
    handleNodeClick(node) {
      this.valueId = node[this.treeProps.id]
      this.valueLabel = node[this.treeProps.label]
      this.$emit('tree-update', this.valueId)
      this.defaultExpandedKey = []
      this.$refs.treeSelect.blur()
      // console.log(this)
      // this.$emit('tree-update', this.valueId)
    },
    // 清除选中
    clearHandle() {
      this.valueId = null
      this.valueLabel = ''
      this.defaultExpandedKey = []
      this.clearSelected()
      this.$emit('tree-update', '')
    },
    // 清空选中样式
    clearSelected() {
      const allNode = document.querySelectorAll('#tree-option .el-tree-node')
      allNode.forEach((element) => element.classList.remove('is-current'))
    }
  }
}
</script>

<style scoped>
  .el-scrollbar .el-scrollbar__view .el-select-dropdown__item{
    height: auto;
    max-height: 200px;
    padding: 0;
    overflow: hidden;
    overflow-y: auto;
  }
  .el-select-dropdown__item.selected{
    font-weight: normal;
  }
  ul li >>>.el-tree .el-tree-node__content{
    height:auto;
    padding: 0 20px;
  }
  .el-tree-node__label{
    font-weight: normal;
  }
  .el-tree >>>.is-current .el-tree-node__label{
    color: #409EFF;
    font-weight: 700;
  }
  .el-tree >>>.is-current .el-tree-node__children .el-tree-node__label{
    color:#606266;
    font-weight: normal;
  }
</style>
